<template>
<div class="container">
    <div class="div1">
        <em>用户晒单/</em>
        <em>共999+条</em>
    </div>
    <div class="div2">
        <swiper :options="swiperOption">

            <swiper-slide class="swiper-slide">
                <router-link to="/commentList" tag="div">
                    <div class="divTop">
                        <img class="img" src="../../assets/image/home/guessLove/2.png" alt="#" title="用户头像">
                        <div class="divTop_div">
                            <p>张张张张哲</p>
                            <p>2019-09-01</p>
                        </div>
                    </div>
                    <p class="pContainer">
                        还可以还可以还可以，就是快递的时候，外包装有点磨损
                    </p>
                </router-link>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <router-link to="/commentList" tag="div">
                    <div class="divTop">
                        <img class="img" src="../../assets/image/home/guessLove/2.png" alt="#" title="用户头像">
                        <div class="divTop_div">
                            <p>张张张张哲</p>
                            <p>2019-09-01</p>
                        </div>
                    </div>
                    <p class="pContainer">
                        还可以还可以还可以，就是快递的时候，外包装有点磨损
                    </p>
                </router-link>
            </swiper-slide>
            <swiper-slide class="swiper-slide">
                <router-link to="/commentList" tag="div">
                    <div class="divTop">
                        <img class="img" src="../../assets/image/home/guessLove/2.png" alt="#" title="用户头像">
                        <div class="divTop_div">
                            <p>张张张张哲</p>
                            <p>2019-09-01</p>
                        </div>
                    </div>
                    <p class="pContainer">
                        还可以还可以还可以，就是快递的时候，外包装有点磨损
                    </p>
                </router-link>
            </swiper-slide>
        </swiper>
    </div>
</div>
</template>

<script>
export default {
    name: "GoodsComments",
    data() {
        return {
            swiperOption: {
                slidesPerView: 2.5,
                spaceBetween: 20,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper

            }

        }
    }
}
</script>

<style scoped>
.container {
    height: 100%;
    width: 100%;
    font-size: .4rem;
    padding-top: .2rem;

}

.div1 {
    height: 1rem;
    line-height: 1rem;
    border-bottom: 1px solid #eee;
}

.swiper-slide {
    height: 2.5rem;
    border: 1px solid #D6D6D6;
    padding: .1rem .1rem 0 .1rem;

}

.divTop {
    height: 1.2rem;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}

.img {
    height: 70%;
    width: 30%;
    border-radius: 50%;
}

.divTop_div {
    height: 70%;
    width: 65%;
    text-align: center;
}

.divTop_div>:last-child {
    font-size: .31rem;

}

.divTop_div>:first-child {
    color: black;
    font-size: .32rem;
    font-weight: 900;
}

.pContainer {
    color: #666666;
    width: 100%;
    font-weight: 900;
    height: .9rem;
    font-size: .42rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}
</style>
